<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>我的消息</span>
        <el-button
          style="float: right; padding: 8px 0"
          type="text"
          @click="handleManage"
        >
          管理我的消息
        </el-button>
      </div>
      <ul>
        <li>共有消息:{{ showCount('msgTotal') }} 条</li>
        <li>已读消息:{{ showCount('readNum') }} 条</li>
        <li>未读消息:{{ showCount('unReadNum') }} 条</li>
      </ul>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
    }
  },
  props: ['data'],
  computed: {
    showCount() {
      return function (name) {
        return this.data.filter((v) => v.name == name)[0].num
      }
    },
  },
  mounted() {
    this.tableData = this.data.filter((v) => v.type == 1)
  },
  methods: {
    handleManage() {
      let routeUrl = this.$router.resolve({ name: 'user-message' })
      window.open(routeUrl.href, '_blank')
    },
  },
}
</script>
<style scoped lang="scss">
.box-card {
  min-height: 400px;
}
</style>